﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>{$config.sitename}</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <link rel="stylesheet" href="../../css/font-awesome/css/font-awesome.min.css" />
  <link href="css/comment.css" rel="stylesheet" />
  <style type="text/css">
    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

    .shop-info {
      border-bottom: 1px solid #e0e0e0;
      margin-bottom: 15px;
    }

      .shop-info .name {
        padding-left: 10px;
        height: 30px;
        line-height: 30px;
        font-weight: 500;
        font-size: 14px;
        color: #888;
        background: #f5f5f5;
      }

    .overall {
      padding: 10px;
      border-top: 1px solid #e0e0e0;
      overflow: hidden;
      height: 44px;
    }

      .overall .star,
      .overall .score,
      .overall .total {
        height: 24px;
        line-height: 25px;
      }

      .overall .score {
        font-size: 14px;
        font-weight: 700;
        color: #FFAB53;
      }

    .comment-list {
      width: 100%;
      background: #fff;
      border-top: 1px solid #e5e5e5;
    }

      .comment-list li {
        padding: 10px;
        border-bottom: 1px solid #e5e5e5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }

    .comment-header {
      margin-bottom: 10px;
    }

      .comment-header .username {
        font-size: 13px;
        color: #111;
      }

      .comment-header .date {
        font-size: 12px;
        color: #88888d;
      }

    .comment-body {
      line-height: 150%;
      font-size: 13px;
      color: #88888d;
    }

    .comment-albums {
      margin-top: 20px;
      margin-right: -8px;
      overflow: hidden;
    }

      .comment-albums img {
        float: left;
        width: 25%;
        height: 68px;
        box-sizing: border-box;
        padding-right: 8px;
        margin-bottom: 8px;
      }

    .more {
      padding: 10px;
      display: none;
      overflow: hidden;
    }

      .more a {
        float: left;
        border: 1px solid #e0e0e0;
        border-radius: 3px;
        text-align: center;
        width: 210px;
        height: 29px;
        line-height: 29px;
        font-size: 13px;
        background-color: #fff;
      }
  </style>
</head>

<body>
  <div class="page" id="page">
    <header class="header">
      <a class="back" href="javascript:history.go(-1);">
        <i class="fa fa-chevron-left"></i>
      </a>
      评价列表
    </header>
    <div class="content">
      <section class="shop-info" id="info"></section>
      <ul class="comment-list" id="list"></ul>
      <div class="more">
        <a id="loadMore" onclick="getList();">查看更多</a>
      </div>
    </div>
  </div>

  <script type="text/x-handlebars-template" id="tpl">
    <h1 class="name">{{name}}</h1>
    <div class="overall">
      <div class="star fl" data-score="{{avgScore}}"></div>
      <div class="score fl">{{avgScore}}</div>
      <div class="total fr">{{userCount}}人评价</div>
    </div>
  </script>
  <script type="text/x-handlebars-template" id="tplComment">
    {{#each this}}
    <li>
      <div class="comment-header">
        <span class="username">{{userName}}</span>
        <span class="date">{{createTime}}</span>
        <span class="star-mini fr" data-score="{{score}}"></span>
      </div>
      <div class="comment-body">
        {{content}}
      </div>
      <div class="comment-albums">
        {{#each images}}
        <img src="{{thumbPath}}" alt="" /> {{/each}}
      </div>
    </li>
    {{/each}}
  </script>

  <input name='wid' type=hidden value="{$wid}">
  <input name='openid' type=hidden value="{$openid}">
  <input name='productid' type=hidden value="{$productid}">
  <input name='skuid' type=hidden value="{$skuid}">

  <script src="scripts/jquery-2.1.4.min.js"></script>
  <script src="scripts/layer/layer.js"></script>
  <script src="scripts/handlebars.js"></script>
  <script src="scripts/raty/jquery.raty.min.js"></script>
  <script type="text/javascript">
    $.fn.raty.defaults.path = 'images/';
    var ui = {
      showLoading: function (message) {
        message = message || '加载中...';
        layer.open({
          content: message
        });
      },
      alert: function (message) {
        layer.open({
          content: message,
          btn: ['确定']
        });
      },
      getQueryString: function (name) {
        var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
        if (result == null || result.length < 1) {
          return "";
        }
        return result[1];
      },
      render: function (tpl, data) {
        var source = $(tpl).html();
        //预编译模板
        var template = Handlebars.compile(source);
        //匹配json内容
        return template(data);
      }
    };
    var param = {
      page: 1
    }

    $(function () {
      param.bid = ui.getQueryString("bid");
      param.type = ui.getQueryString("type");

      getTotal({
        success: getList
      });
    });

    function getTotal(option) {
      var option = option || {};
      ui.showLoading();
      $.ajax({
        url: '/shop/shopmgr.ashx?myact=product_comments', //'ajax.ashx?action=getTotal',
        type: 'get',
        dataType: 'jsonp',
        data: param,
        success: function (res) {
          layer.closeAll();
          if (res.isSuccess) {
            ui.totalCount = res.data.userCount;
            $('#info').append(ui.render('#tpl', res.data));
            $(".star").raty({
              width: 150,
              readOnly: true,
              score: function () {
                return $(this).attr('data-score');
              }
            });

            if (ui.totalCount) {
              option.success && option.success();
            }
          }
        }
      });
    }

    function getList() {
      ui.showLoading();
      var comment = {};
      $.ajax({
        url: '/shop/shopmgr.ashx?myact=product_evaluate',
        type: 'post',
        dataType: 'jsonp',
        data: comment,
        success: function (res) {
          layer.closeAll();
          if (res.isSuccess) {
            $('#list').append(ui.render('#tplComment', res.data));

            var loadMore = Math.ceil(ui.totalCount / 10) === param.page;
            $(".more").hide();
            if (!loadMore && ui.totalCount !== 0) {
              param.page++;
              $(".more").show();
            }

            $(".star-mini").raty({
              width: 100,
              readOnly: true,
              starHalf: 'mini-star-half.png',
              starOff: 'mini-star-off.png',
              starOn: 'mini-star-on.png',
              score: function () {
                return $(this).attr('data-score');
              }
            });
          }
        }
      });
    }
  </script>
</body>

</html>